<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="__PUBLIC__/Image/logo.ico">

    <title>我的订单</title>

    <!-- Bootstrap core CSS -->
    <link href="__PUBLIC__/Css/lib/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="__PUBLIC__/Css/lib/bootstrap-datetimepicker.min.css" rel="stylesheet"  media="screen">
     <!-- 自定义公共CSS -->
    <link href="__PUBLIC__/Css/Index/common.css" rel="stylesheet" type="text/css">
    <style type="text/css">
		body{
			line-height:1.1;
		}
		
		.strong{
			font-size:50px;
		}
		
		.small{
			font-size:25px;
		}
		
		 a{
			color:white;
			font-weight:bold;
		}
		
		.contains{
			background-color:#F8931F;
		}
		
		.table th,
	    .table td{
			text-align:center;
	    	border-right:2px solid white;
		}
		
		.page_order a{
			color:#F8931F;
		}
		
		.page_order a:hover{
			color:#151FD8;
		}
		
		.personcenter-list{
			text-align:right;
			margin-top:30px;
			font-size:40px;
			margin-right:10px;
			line-height:50px;
		}
		
		@media screen and (max-height:800px){
			.personcenter-list{
				margin-right:5px;
				line-height:45px;
			}
		}
		
	</style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <script src="__PUBLIC__/Js/lib/jquery-1.11.2.min.js"></script>
	<script src="__PUBLIC__/Js/lib/bootstrap.min.js"></script>
	<script src="__PUBLIC__/Js/lib/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="__PUBLIC__/Js/lib/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
	<script src="__PUBLIC__/Js/Index/common.js"></script>
	<script type="text/javascript">
  		$(function(){
  			var order_date_st = $("#order_date_st").val();
  			var order_date_ed = $("#order_date_ed").val();
  			// 设定日期控件
  			$('#datetimepicker_st').datetimepicker({
  		        language: 'zh-CN',
  		        format: "yyyy-mm-dd",
  	        	autoclose: true,
  	        	todayBtn: false,
  	        	todayHighlight: false,
	  	  		startView: 2,
	  	  		minView: 2,
  	        	pickerPosition:"bottom-right",
  	        	
  		    });
  			
  			$('#datetimepicker_ed').datetimepicker({
  		        language: 'zh-CN',
  		        format: "yyyy-mm-dd",
  	        	autoclose: true,
  	        	todayBtn: false,
  	        	todayHighlight: false,
	  	  		startView: 2,
	  	  		minView: 2,
  	        	pickerPosition:"bottom-right",
  		    });
  			
  			// 初始化时，隐藏订单详细
  			$("#orderDetailInfo").hide();
  			
  			// 评论弹出框显示时事件
  			$('#commentModal').on('show.bs.modal', function (e) {
  				$("#comment").val("");
  			});
  		});
  		
  		// 显示订单详细
  		function showDetail(order_id){
  			$.ajax({
					url:"__URL__/getOrderDetail",
					type:"post",
					async:false,
					data:"order_id=" + order_id,
					dataType:"json",
					success:function(data){
						if(data != null || (data != null && data.length > 0)){
							$("#detail_order_id").text(data.id == null?"":data.id);
							$("#detail_product_name").text(data.product_name== null?"":data.product_name);
							$("#detail_unit_price").text(data.price== null?"":data.price);
							$("#detail_count-adult").text(data.count_adult== null?"":data.count_adult);
							$("#detail_count_child").text(data.count_child== null?"":data.count_child);
							$("#detail_travel_date").text(data.travel_date== null?"":data.travel_date);
							
				  			$("#orderInfo").hide();
				  			$(".page_order").hide();
				  			$("#orderDetailInfo").show();
						} 
					},
					error:function(data){
						
					}
				});
  		}
  		
  		// 隐藏订单详细
  		function hideDetail(){
  			$("#orderDetailInfo").hide();
  			$("#orderInfo").show();
  			$(".page_order").show();
  		}
  		
  		// 取消订单
  		function removeOrder(order_id){
  			if(confirm("您确定要取消该订单吗？")){
  				$.ajax({
  					url:"__URL__/removeOrder",
  					type:"post",
  					async:false,
  					data:"order_id=" + order_id,
  					dataType:"json",
  					success:function(data){
  						alert(data.message);
  						if(data.status == 200){
  	  						location.reload(true);
  						} 
  					},
  					error:function(data){
  						
  					}
  				});
  			}
  		}
  		
  		// 删除订单
  		function deleteOrder(order_id){
  			if(confirm("您确定要删除该订单吗？")){
	  			$.ajax({
					url:"__URL__/deleteOrder",
					type:"post",
					async:false,
					data:"order_id=" + order_id,
					dataType:"json",
					success:function(data){
						alert(data.message);
						if(data.status == 200){
	  						location.reload(true);
						} 
					},
					error:function(data){
						
					}
				});
  			}
  		}
  		
  		// 显示发表评论弹出框
  		function comment(order_id){
  			$("#comment_order_id").val(order_id);
  			$("#commentModal").modal('show');
  		}
  		
  		// 发表评论
  		function submitComment(){
  			var comment = $("#comment").val();
  			$('#commentModal').modal('hide');
  			var order_id = $("#comment_order_id").val();
  			if($.trim(order_id) == ""){
  				alert("您的评论发表失败!");
  				$('#commentModal').modal('show');
  				$("#comment").val(comment);
  				return false;
  			}
  			
  			if($.trim(comment) == ""){
  				alert("请输入评论内容!");
  				$('#commentModal').modal('show');
  				$("#comment").val(comment);
  				return false;
  			}
  			if(comment.length > 300){
  				alert("评论内容不能超过300字!");
  				$('#commentModal').modal('show');
  				$("#comment").val(comment);
  				return false;
  			}
  			$.ajax({
				url:"__URL__/releaseComment",
				type:"post",
				async:false,
				data:"order_id=" + order_id + "&comment=" + comment,
				dataType:"json",
				success:function(data){
					alert(data.message);
					if(data.status == 200){
  						window.location.href="__URL__/myOrders";
					} else  {
						$('#commentModal').modal('show');
		  				$("#comment").val(comment);
					}
				},
				error:function(data){
					$('#commentModal').modal('show');
	  				$("#comment").val(comment);
				}
			});
  		}
	</script>
  </head>

  <body>
<div class="myContainer col-xs-12 col-sm-12 col-md-12 col-lg-12">
	 <div class="row whole-row" style="height:530px;">
	  		<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 contains" style="height:100%;width:75%;">
	  			<div id="orderList">
		  			<div class="row" style="background-color:#FEEDD9;height:50px;margin:5px;margin-top:15px;font-size:20px;color:#F8931F;">
		  				<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" style="text-align:left;width:180px;padding-top:12px;">
		  					我的订单提醒:
	  					</label>
					    <span  class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" id="registeredPhone" style="text-align:left;width:auto;padding-top:12px;">
					    	待付款（<span>{$un_pay_count}</span>）&nbsp;&nbsp;待点评（<span>{$un_comment_count}</span>）
				    	</span>
					    <div style="float:right;padding-top:12px;margin-right:20px;" class="page_order">
					    	<!-- <a href="" style="color:#F8931F;">上页</a>&nbsp;&nbsp;
					    	<a href="" style="color:#F8931F;">下页</a> -->
					    	{$page}
				    	</div>
		  			</div>
		  			<div id="orderInfo">
			  			<div class="row" style="margin:5px;margin-top:15px;font-size:20px;color:white;">
			  				<table class="table" style="border:2px solid white;">
							   <thead>
							      <tr>
							         <th style="width:20%;">订单编号</th>
							         <th style="width:35%;">产品信息</th>
							         <th>订单金额</th>
							         <th>订单状态</th>
							         <th>操作</th>
							      </tr>
							   </thead>
							   <tbody>
							   	 <foreach name="order_list" item="order">
							   	 	<tr>
							         <td><a href="javascript:showDetail('{$order.id}');">{$order.id}</a></td>
							         <td>{$order.product_name}</td>
							         <td>{$order.total_price}</td>
							         <if condition="$order.pay_status eq 1">
							         	<td>待付款</td>
							         <elseif condition="$order.pay_status eq 2"/>
							         	<td>已付款</td>
							         <elseif condition="$order.pay_status eq 3"/>
							         	<td>已完成</td>
							         <elseif condition="$order.pay_status eq 4"/>
							         	<td>已失效</td>
							         </if>
							         <if condition="$order.pay_status eq 1">
							         	<td><a href="javascript:removeOrder('{$order.id}');">取消</a>&nbsp;<a href="{:U('Index/payFromOrder')}?order_id={$order.id}">付款</a></td>
							         <elseif condition="$order.pay_status eq 2"/>
							         	<td><a href="javascript:comment('{$order.id}');">点评</a></td>
							         <elseif condition="$order.pay_status eq 3"/>
							         	<td></td>
							         <elseif condition="$order.pay_status eq 4"/>
							         	<td><a href="javascript:deleteOrder('{$order.id}');">删除</a></td>
							         </if>
							      </tr>
							   	 </foreach>
							   </tbody>
							</table>
			  			</div>
			  			
			  			<div class="row" style="background-color:#F8931F;height:50px;margin:5px;margin-top:15px;font-size:20px;color:white;border:2px solid white;">
			  				<form class="form-horizontal" role="form" action="{:U('Index/myOrders')}" method="post">
							   <div class="form-group">
							      <label for="orderNum" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 control-label" style="text-align:left;width:90px;padding-right:0;padding-top:10px;">订单号</label>
							      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding-left:0;padding-top:5px;">
							         <input type="text" class="form-control" name="orderNum" id="orderNum" value="{$orderNum}"> 
							      </div>
							      <label for="orderDate_st" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 control-label" style="text-align:left;width:85px;padding-left:0;padding-right:0;padding-top:10px;">预定日期</label>
							      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding-left:0;padding-top:5px;padding-right:10px;width:168px;">
							         <div class="input-group date form_date" data-date="" id="datetimepicker_st" style="width:100%;">
					                    <input class="form-control" id="order_date_st" name= "order_date_st" size="16" type="text" value="{$order_date_st}" readonly 
					                       style="background-color:white;padding:0;width:85px;">
					                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
										<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
					                </div>
							      </div>
							      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" style="padding:0;width:20px;padding-top:10px;">
							         <label style="font-size:20px;color:white;font-weight:bold;">-</label>
							      </div>
							       <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 info" style="padding-left:0;padding-top:5px;width:168px;">
							         <div class="input-group date form_date" data-date="" id="datetimepicker_ed" style="width:100%;">
					                    <input class="form-control" id="order_date_ed" name= "order_date_ed" size="16" type="text" value="{$order_date_ed}" readonly 
					                        style="background-color:white;padding:0;width:85px;">
					                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
										<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
					                 </div> 
							      </div>
							      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 info" style="padding-left:0;padding-top:5px;width:auto;margin-left:10px;">
							         <button type="submit" class="btn" style="color:#F8931F;font-size:20px;border-radius:5px;padding-top:0;padding-bottom:0;margin-top:2px;">查询</button>
							      </div>
							   </div>
							</form>
			  			</div>
		  			</div>
		  			
		  			<div id="orderDetailInfo">
		  				<table class="table" style="border:2px solid white;color:white;font-size:20px;">
		  					<tr>
		  						<td style="text-align:right;width:180px;">订单编号：</td><td style="text-align:left;" id="detail_order_id"></td>
		  					</tr>
		  					<tr>
		  						<td style="text-align:right;width:180px;">产品名称：</td><td style="text-align:left;" id="detail_product_name"></td>
		  					</tr>
		  					<tr>
		  						<td style="text-align:right;width:180px;">单价(成人票)：</td><td style="text-align:left;" ><span id="detail_unit_price"></span>元</td>
		  					</tr>
		  					<tr>
		  						<td style="text-align:right;width:180px;">出行人数：</td><td style="text-align:left;">成人：<span id="detail_count-adult">0</span>&nbsp;儿童：<span id="detail_count_child">0</span></td>
		  					</tr>
		  					<tr>
		  						<td style="text-align:right;width:180px;">出行日期：</td><td style="text-align:left;" id="detail_travel_date">0</td>
		  					</tr>
		  				</table>
		  				<button type="button" class="btn" style="color:#F8931F;font-size:20px;border-radius:5px;padding-top:0;padding-bottom:0;margin-top:2px;float:right;" id="rtnBtn" onclick="hideDetail();">返回</button>
		  			</div>
		  			
	  			</div>
			</div>
			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 contains" style="height:100%;margin-left:20px;width:22%;">
				<div class="row" style="color:white;text-align:center;padding-top:80px;">
					<strong class="strong">我的订单</strong><br>
					<strong class="small">my orders</strong>
				</div>
				<div class="row personcenter-list" style="">
					<strong><a href="{:U('Index/personalProfile')}">个人资料</a></strong><br>
					<strong><a href="{:U('Index/myMessages')}">我的消息</a></strong><br>
					<strong><a href="{:U('Index/accountSecurity')}">账户安全</a></strong><br>
					<strong><a href="{:U('Index/releaseNotes')}">发布游记</a></strong><br>
					<strong><a href="{:U('Index/travelNotes')}">我的游记</a></strong>
				</div>
			</div>
	  </div>
      <div style="margin-top:30px;">
	  	<include file="Public:footer" />
	  </div>
</div>
<!-- 点评模态框（Modal） -->
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" ria-hidden="true">
   <div class="modal-dialog" style="width:50%;margin-top:10%;">
      <div class="modal-content">
         <div class="modal-header" style="background-color:#43b413;color:white;height:50px;">
         	<div style="text-align:center;font-size:20px;">发表评论</div>
            <button type="button" class="close"
               data-dismiss="modal" aria-hidden="true" style="position:absolute;right:10px;top:10px;font-size:30px;font-weight:bold;opacity:1;color:white;">
                  &times;
            </button>
         </div>
         <div class="modal-body">
            <form class="form-horizontal" role="form" style="">
               <input type="hidden" id="comment_order_id">
			   <div class="form-group" style="margin-top:30px;">
			      <label for="username" class="col-sm-2 control-label">评论内容:</label>
			      <div class="col-sm-9">
			         <textarea  class="form-control" id="comment" name="comment" style="height:200px;margin-bottom:40px;"></textarea>
			      </div>
			   </div>
			   <div class="form-group">
			      <div class="col-sm-offset-2 col-sm-9">
			        <button type="button" class="btn btn-default" id="commentBtn" onclick="submitComment();"
				         style="background-color:#FF9219;color:white;height:50px;width:100%;font-size:25px;margin-bottom:40px;">发表</button>
			      </div>
			   </div>
			</form>
	         </div>
	         <div class="modal-footer">
	         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
  </body>
</html>
